<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_AFragment :: head(~{::title})">
    <meta charset="UTF-8">
    <title>资源管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <script src="../../static/layui/layui.js"></script>
</head>
<body>
<!--头部导航部分-->
<div class="header" th:replace="admin/_AFragment :: topmenu">
    <div class="layui-col-md10">
        <span id="header-font">贫困生资助系统</span>
    </div>
    <ul class="layui-nav layui-col-md2">
        <li class="layui-nav-item" style="float: right">
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul>
</div>
<!--主要内容部分-->
<div class="layui-row">
    <!--左侧导航-->
    <ul th:replace="admin/_AFragment :: leftmenu(5)" class="layui-nav layui-nav-tree  layui-col-md2" lay-filter="demo" style="height: 662px">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;"><i class="layui-icon">&#xe770;</i> 个人中心</a>
            <dl class="layui-nav-child">
                <dd class="layui-this"><a href="javascript:;">主页</a></dd>
                <dd><a href="javascript:;">用户信息</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="#"><i class="layui-icon">&#xe66f;</i>学生信息管理</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">&#xe6b2;</i> 用户管理</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">用户管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">&#xe857;</i> 资助管理</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">资源管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">&#xe631;</i> 系统管理</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改密码</a></dd>
            </dl>
        </li>
    </ul>
    <!--右侧内容-->
    <div class="layui-col-md10">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>资源列表</legend>
        </fieldset>
        <form class="layui-form" action="" th:action="@{/admin/resource}">
            <div class="layui-form-item" style="margin-left: 5px">
                资源名：
                <div class="layui-inline">
                    <input class="layui-input" name="resourceName" id="resourceNameSearch">
                </div>
                <button class="layui-btn" lay-submit>搜索</button>
            </div>
        </form>
        <!--表格-->
        <table class="layui-table">
            <thead>
            <tr>
                <th>资源名</th>
                <th>创建时间</th>
                <th style="width: 450px;">资源描述</th>
                <th>资源级别</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="resources,Iterable:${resourcesPage.records}">
                <td th:text="${resources.resourceName}">国家助学金</td>
                <td th:text="${#dates.format(resources.resourceTime,'yyyy-MM-dd HH:mm')}">2016-11-29</td>
                <td>
                    <div class="tdDiv" th:text="${resources.resourceInfo}"> 人生就像是一场修行</div>
                </td>
                <td th:text="${resources.resourceLevel}">国家</td>
                <td>
                    <button type="button" class="layui-btn layui-btn-sm" onclick="change(1)"
                            th:onclick="change([[${resources.resourceId}]])">修改
                    </button>
                    <button th:onclick="delResource([[${resources.resourceId}]])" onclick="delResource(1)" type="button"
                       class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="layui-row">
            <div class="layui-col-md8">
                <button id="addButton" type="button" class="layui-btn layui-btn-sm layui-btn-normal"
                        style="margin-left: 10px">添加
                </button>
            </div>
            <div class="layui-col-md4 layui-btn-group " style="left: 100px">
                <a href="#" th:href="@{/admin/resource(resourceName=${resourceName})}" type="button" class="layui-btn layui-btn-primary">首页</a>
                <a href="#"
                   th:href="@{/admin/resource(currentPage=${resourcesPage.current}-1,totalPage=${resourcesPage.pages},F)}"
                   type="button" class="layui-btn layui-btn-primary">上一页</a>
                <a href="#"
                   th:href="@{/admin/resource(currentPage=${resourcesPage.current}+1,totalPage=${resourcesPage.pages},resourceName=${resourceName})}"
                   type="button" class="layui-btn layui-btn-primary">下一页</a>
                <a href="#" th:href="@{/admin/resource(currentPage=${resourcesPage.pages},resourceName=${resourceName})}" type="button"
                   class="layui-btn layui-btn-primary">尾页</a>
            </div>
        </div>

    </div>
</div>

<!--弹出层-->
<div class="layui-card" id="outCard" style="display: none;text-align: center;">
    <div id="outCardHead" class="layui-card-header"></div>
    <div id="outCardBody" class="layui-card-body">
        <form class="layui-form" action="#" method="post" lay-filter="form">
            <!--更新时隐藏提交id-->
            <input type="text" hidden name="resourceId" id="resourceId">
            <div class="layui-form-item">
                <label class="layui-form-label">资源名</label>
                <div class="layui-input-block">
                    <input type="text" name="resourceName" id="resourceName" required lay-verify="required"
                           placeholder="请输入资源名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">资源级别</label>
                <div class="layui-input-block">
                    <select name="resourceLevel" id="resourceLevel" lay-verify="required">
                        <option value=""></option>
                        <option value="院校">院校</option>
                        <option value="国家">国家</option>
                        <option value="社会">社会</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">资源描述</label>
                <div class="layui-input-block">
                    <textarea name="resourceInfo" id="resourceInfo" placeholder="请输入内容"
                              class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--删除弹出层-->
<div class="layui-card" id="delOutCard" style="display: none;text-align: center;">
    <div class="layui-card-header">消息</div>
    <div class="layui-card-body">
        确认删除？
    </div>
    <div class="layui-card-body">
        <a id="delResource" href="#" type="button" class="layui-btn layui-btn-sm layui-btn-normal">确认</a>
        <a id="cancel" href="#" type="button" class="layui-btn layui-btn-sm layui-btn-primary">取消</a>
    </div>
</div>
</body>
<script>
    layui.use('layer', function(){
        var $ = layui.jquery, layer = layui.layer;
        var msg = "[[${msg}]]";
        //弹出消息
        if (msg!=null&&msg!=""){
            layer.msg(msg);
        }
        //点击删除
        window.delResource = function (resourceId){
            $("#delResource").attr("href","/admin/delResource?resourceId="+resourceId);
            layer.open({
                title: false,
                type:1,
                content: $("#delOutCard")
            });
        }
        //点击取消关闭弹出层
        $("#cancel").click(function () {
            layer.closeAll('page');
        });

        //点击添加
        $('#addButton').click(function () {
            $("#outCardHead").text("添加资源");
            $("#outCardBody>form").attr("action","/admin/addResource")
            layer.open({
                title: false,
                type:1,
                content: $("#outCard")
            });
        });
        //点击修改
        window.change = function (resourceId) {
            $("#outCardHead").text("修改资源");
            $("#outCardBody>form").attr("action","/admin/updateResource")
            $.get({
                url:'/teacher/findResource?resourceId='+resourceId,
                success:function (data) {
                    $("#resourceId").val(data.resourceId);
                    $("#resourceName").val(data.resourceName);
                    $("#resourceInfo").text(data.resourceInfo);
                    if (data.resourceLevel==="院校"){
                        $("#resourceLevel>option").eq(1).attr("selected",true);
                    }
                    if (data.resourceLevel==="国家"){
                        $("#resourceLevel>option").eq(2).attr("selected",true);
                    }
                    if (data.resourceLevel==="社会"){
                        $("#resourceLevel>option").eq(3).attr("selected",true);
                    }
                    //layui的form,刷新单选框(select)渲染,lay-filter="form"
                    layui.form.render('select','form');
                }
            });
            layer.open({
                title: false,
                type:1,
                content: $("#outCard")
            });
        }
    });
    layui.use('element', function(){
    });
    layui.use('form', function(){
    });
</script>
</html>